import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component { 
	constructor(props) {
		super(props);
	}

	componentDidMount(){
		// 我的保障
    }
	
	render() {
		return (
            <div className="guarantee">  
                <div className="main bor-top">
                    <div className="personal-info">
                        <div className="ratio-bar">
                            <div className="amount-insurance">
                                <div className="personal-insured"></div>
                            </div>
                        </div>
                        <ul className="basic-info">
                            <li className="insure-info f26 fc8 clearfix"><span className="dot fl"></span>Personal insured <span className="f34 fc0 fr strong">780,000</span></li>
                            <li className="insure-info f26 fc8 clearfix"><span className="dot dot-1 fl"></span>Share the amount of insurance <span className="f34 fc0 fr strong">220,000</span> </li>
                        </ul>
                    </div>

                    <div className="insured-details">
                        <ul className="details-cards" id="detailsCards">
                            <li className="card-item">
                                <p className="card-title bor-bottom"><span className="pre-sign fl mr15"></span>Personal insured details</p>
                                <ul className="card-list">
                                    <li className="card-cell">
                                        <p className="title">Public transport accident <span className="arrow arrow-down fr"></span><span className="price fr">700,000</span></p>
                                        <ul className="cards none">
                                            <li className="card">
                                                <p className="card-title f30 fc0">Personal insured details</p>
                                                <button className="btn-security"></button>

                                                <ul className="user-info f26 fc8">
                                                    <li className="insured">Insured: An xiaobao</li>
                                                    <li className="deadline">Guarantee to: September 12, 2017</li>
                                                </ul>

                                                <ul className="accidents f26 fc0">
                                                    <li className="accident">Public transport accident<span className="fr">700,000</span> </li>
                                                    <li className="accident">Special traffic accident<span className="fr">30,000</span></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li className="card-cell">
                                        <p className="title">Public transport accident <span className="arrow arrow-down fr"></span><span className="price fr">700,000</span></p>
                                        <ul className="cards none">
                                            <li className="card">
                                                <p className="card-title f30 fc0">Personal insured details</p>
                                                <button className="btn-security"></button>

                                                <ul className="user-info f26 fc8">
                                                    <li className="insured">Insured: An xiaobao</li>
                                                    <li className="deadline">Guarantee to: September 12, 2017</li>
                                                </ul>

                                                <ul className="accidents f26 fc0">
                                                    <li className="accident">Public transport accident<span className="fr">700,000</span> </li>
                                                    <li className="accident">Special traffic accident<span className="fr">30,000</span></li>
                                                    <li className="accident">Special traffic accident<span className="fr">30,000</span></li>
                                                    <li className="accident">Special traffic accident<span className="fr">30,000</span></li>
                                                </ul>
                                            </li>
                                            <li className="card">
                                                <p className="card-title f30 fc0">Personal insured details</p>
                                                <button className="btn-security"></button>

                                                <ul className="user-info f26 fc8">
                                                    <li className="insured">Insured: An xiaobao</li>
                                                    <li className="deadline">Guarantee to: September 12, 2017</li>
                                                </ul>

                                                <ul className="accidents f26 fc0">
                                                    <li className="accident">Public transport accident<span className="fr">700,000</span> </li>
                                                    <li className="accident">Special traffic accident<span className="fr">30,000</span></li>
                                                    <li className="accident">Special traffic accident<span className="fr">30,000</span></li>
                                                    <li className="accident">Special traffic accident<span className="fr">30,000</span></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li className="card-item">
                                <p className="card-title bor-bottom"><span className="pre-sign fl mr15"></span>Personal insured details</p>

                                <ul className="card-list" id="cardList">
                                    <li className="card-cell">
                                        <p className="title">Public transport accident <span className="arrow arrow-down fr"></span><span className="price fr">700,000</span></p>
                                        <ul className="cards none">
                                            <li className="card">
                                                <p className="card-title f30 fc0">Personal insured details</p>
                                                <button className="btn-security"></button>

                                                <ul className="user-info f26 fc8">
                                                    <li className="insured">Insured: An xiaobao</li>
                                                    <li className="deadline">Guarantee to: September 12, 2017</li>
                                                </ul>

                                                <ul className="accidents f26 fc0">
                                                    <li className="accident">Public transport accident<span className="fr">700,000</span> </li>
                                                    <li className="accident">Special traffic accident<span className="fr">30,000</span></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li className="card-cell">
                                        <p className="title">Public transport accident <span className="arrow arrow-down fr"></span><span className="price fr">700,000</span></p>
                                        <ul className="cards none">
                                            <li className="card">
                                                <p className="card-title f30 fc0">Personal insured details</p>
                                                <button className="btn-security"></button>

                                                <ul className="user-info f26 fc8">
                                                    <li className="insured">Insured: An xiaobao</li>
                                                    <li className="deadline">Guarantee to: September 12, 2017</li>
                                                </ul>

                                                <ul className="accidents f26 fc0">
                                                    <li className="accident">Public transport accident<span className="fr">700,000</span> </li>
                                                    <li className="accident">Special traffic accident<span className="fr">30,000</span></li>
                                                    <li className="accident">Special traffic accident<span className="fr">30,000</span></li>
                                                    <li className="accident">Special traffic accident<span className="fr">30,000</span></li>
                                                </ul>
                                            </li>
                                            <li className="card">
                                                <p className="card-title f30 fc0">Personal insured details</p>
                                                <button className="btn-security"></button>

                                                <ul className="user-info f26 fc8">
                                                    <li className="insured">Insured: An xiaobao</li>
                                                    <li className="deadline">Guarantee to: September 12, 2017</li>
                                                </ul>

                                                <ul className="accidents f26 fc0">
                                                    <li className="accident">Public transport accident<span className="fr">700,000</span> </li>
                                                    <li className="accident">Special traffic accident<span className="fr">30,000</span></li>
                                                    <li className="accident">Special traffic accident<span className="fr">30,000</span></li>
                                                    <li className="accident">Special traffic accident<span className="fr">30,000</span></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        )
	}
}

export default App;